<template>
  <div class="container">
    <div class="top" ref="top">
      <div class="title">
        <span class="a">服务通道</span>
      </div>
    </div>
    <div class="content">
      <div class="service">
        <div class="service_item" v-for="item in data" :key="item.id">
          <div class="icon">
            <i :class="item.icon"></i>
          </div>
          <div class="title" @click="toOtherSystem(item)">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    serviceData: Array,
  },
  watch: {
    serviceData(newVal) {
      this.processingData(newVal);
    },
  },
  data() {
    return {
      data: [],
      moreData: [],
      svgs: [
        {
          color: "#c34f3d",
          width: 1920,
          height: 75,
          paths: [
            "M 0.00 31.00 L 0.00 75.00 L 1616.00 75.00 C 1529.88 67.05 1450.69 29.33 1371.00 0.00 L 1051.00 0.00 C 992.18 24.48 939.22 61.56 873.78 67.78 C 808.34 73.99 748.23 34.25 697.00 0.00 L 222.00 0.00 C 156.14 37.53 75.68 38.04 0.00 31.00 Z",
            "M 1655.00 75.00 L 1920.00 75.00 L 1920.00 0.00 L 1826.00 0.00 C 1776.23 38.11 1718.18 69.97 1655.00 75.00 Z",
          ],
          class: "mask",
          pDom: "top",
        },
      ],
      icons: [
        "el-icon-paperclip",
        "el-icon-takeaway-box",
        "el-icon-monitor",
        "el-icon-attract",
        "el-icon-mobile",
        "el-icon-umbrella",
        "el-icon-reading",
        "el-icon-suitcase-1",
      ],
    };
  },
  created() {},
  mounted() {
    this.svgs.forEach((item) => {
      const svgContent = this.$createSvg(item);
      const mask = document.createElement("div");
      mask.className = item.class;
      mask.style.position = "absolute";
      mask.style.top = "0";
      mask.style.left = "0";
      mask.style.right = "0";
      mask.style.bottom = "0";
      mask.style.zIndex = "1";
      mask.innerHTML = svgContent;
      this.$refs[item.pDom].appendChild(mask);
    });
  },
  methods: {
    processingData(data) {
      if (data.length <= 8) {
        this.data = data.map((item, index) => ({
          ...item,
          icon: this.icons[index],
        }));
      } else {
        this.data = data
          .slice(0, 7)
          .map((item, index) => ({ ...item, icon: this.icons[index] }));
        this.data.push({
          id: 999,
          title: "更多",
          icon: "el-icon-more",
        });
        this.moreData = data.slice(7);
      }
      this.$forceUpdate();
    },
    toOtherSystem(item) {
      if (item.intro) {
        window.open(item.intro);
      }
    },
  },
};
</script>
<style lang="scss">
.top {
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}
</style>
<style lang="scss" scoped>
.container {
  .top {
    height: 75px;
    position: relative;
    background-color: #f5f9f7;
    overflow-x: clip;
    .title {
      position: relative;
      z-index: 2;
      margin: 0 auto;
      width: 1440px;
      padding-left: 60px;
      .a {
        display: block;
        color: #fff;
        text-align: center;
        width: 160px;
        font-weight: bold;
        border-bottom: 3px solid #ffcccc;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
      }
    }
  }
  .content {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #c34f3d;
    .service {
      margin: 0 auto;
      width: 1440px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      .service_item {
        margin: 20px 0;
        width: 325px;
        height: 180px;
        background-color: #fdfaf9;
        border-radius: 90px 15px 60px 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        .icon {
          font-size: 50px;
          color: #545c77;
        }
        .title {
          font-size: 20px;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
